<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        i {
            font-style: normal;
        }

        ul {
            width: 300px;
            border: 1px solid pink;
            margin: 30px auto;
        }

        ul>li {
            text-indent: 20px;
        }

        ul>li>ol {
            text-indent: 40px;
            display: none;
        }
    </style>
</head>

<body>
    <ul>
        <li class="first">
            <i class="f">+</i>
            <span>一级菜单</span>
            <ol>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
            </ol>
        </li>

        <li class="first">
            <i class="f">+</i>
            <span>一级菜单</span>
            <ol>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
            </ol>
        </li>

        <li class="first">
            <i class="f">+</i>
            <span>一级菜单</span>
            <ol>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
                <li>
                    <i>+</i>
                    <span>二级菜单</span>
                </li>
            </ol>
        </li>
    </ul>

    <script src="../jquery/jquery-3.6.0.js"></script>

    <script>
        $("ul>li>.f").click(function () {

            // 找到了自家的二级菜单ol
            $(this).next().next()

                // 收起和展开之间切换
                .slideToggle(
                    "fast",

                    // 动画结束时根据二级菜单ol的显隐决定一级菜单+-
                    function() {
                        // console.log(this);
                        if ($(this).css("display") === "none") {
                            $(this).prev().prev().text("+")
                        } else {
                            $(this).prev().prev().text("-")
                        }
                    }
                )

                // ol-当前li-其它li-其它li下的ol
                .parent().siblings().find("ol")
                // 收起
                .slideUp()

                // span-i
                .prev().prev()
                .text("+")
        })
    </script>
</body>

</html>